<template>
  <div class="talkContent">
    <button @click="getTalk">获取一句话</button>
    <ul>
      <li v-for="item in talkList" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import { ref, reactive } from "vue";
import axios from "axios";
import { nanoid } from "nanoid";
let talkList = reactive([
  { id: "001", title: "今天你学习了吗" },
  { id: "002", title: "今天你锻炼身体了吗" },
  { id: "003", title: "今天你休息怎么样了" },
]);
async function getTalk() {
  // 使用代理路径解决跨域问题
  let result = await axios.get("/api/api/rand.qinghua?format=json");
  //axios返回的是promise对象，加上await会等待promise对象返回结果
  //下面的写法是连续解构赋值+重命名
  // let {data:{content:title}} = await axios.get(
  //   "/api/api/rand.qinghua?format=json"
  // );
  console.log(result);
  let obj = {
    id: nanoid(),
    title: result.data.content, //可以直接简写 title
  };
  console.log(obj);
  //放到数组第一个
  talkList.unshift(obj);
}
</script>

<style scoped>
.talkContent {
  background: #cacaca;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}
</style>
